getElement 和 querySelector區別

• querySelector
  • 返回的是一個 Static Node List（靜態）
  • 接收的參數是一個CSS選擇符
• getElementsBy 系列
  • 返回的是一個 Live Node List（動態）
  • 接收的參數只能是單一的className，tagName和name

ClassList 屬性

DOM裡每個節點上都有一個classList物件。

1. 可用裡面的方法新增、刪除、修改節點上的CSS。

2. 也可以用它來判斷某個節點是否被賦予了某個CSS。

   新增類（add）

   鍵盤按鍵觸發時，增加playing這個class。

   //DOM style
   function playHandler(e){
       const dom = document.querySelector(`div[data-key="${e.keyCode}"]`);
       if (dom){
         dom.classList.add('playing');
       }
   

   移除類(remove)

   transitionend的時候去remove掉playing這個class。

   function removeClassList(e){
       console.log(e)
       if(e.propertyName === 'transform'){
         e.target.classList.remove('playing')
       }
     }
   

TransitionEvent事件

CSS屬性的值從一個值變成另一個值的過程叫做漸變。CSS3 transition系列屬性可控制這個變化過程，使得屬性值變化過程更加平滑。

transitionend

當一個CSS過渡完成時，會出現transitionend事件。

＝＝＝

   if(e.propertyName === 'transform'){
      e.target.classList.remove('playing')
    }

== 左右兩邊的值相等就回傳true
=== 左右兩邊的值以及type均相等才回傳true